<template>
	<view class="page">
		<view class="pageContent">
			<u-subsection :list="selectList" :current="current"  @change="sectionChange"></u-subsection>
			<scrollYBox styleText="height: calc( 100vh - 0rpx ) ;" @scrolltolower="scrolltolower" :list="list">
				<template>
					<view class="selectBox" style="padding-bottom: 50rpx;">
						<view class="selectItem" v-for="(item,index) in list" :key="index" @click="handleShopItem(item)">
							<view class="image">
								<image :src="imgBaseUrl3+item.pic"></image>
							</view>
								
								<view class="infoBox">
									<view class="name">
										{{item.commodityName}}
										<text >{{item.specificationItemNames}}</text>
									</view>
									<view class="row">
									<text >{{item.num}}件</text>
									<text class="moneyText red">￥{{item.num*item.price}}</text>
									</view>
							
								</view>
								
						</view>
					</view>
				</template>
			</scrollYBox>
		</view>
		<uniformshoptabbarVue ref="uniformshoptabbarVue"></uniformshoptabbarVue>
	</view>
</template>

<script>
	import uniformshoptabbarVue from "./uniformshoptabbar.vue";
	import {orderListApi} from '@/common/api/commonApi/uniformshop.js'
	export default {
		components:{
			uniformshoptabbarVue
		},
		data() {
			return {
				
				
				params:{
					status:1,
					pageNo:1,
					pageSize: 10,
					personId:'',
				},
				selectList:[
					'已支付',
					'已发货',
					'已取消',
				],
				list:[],
				current: 0,
				
			}
		},
		methods: {
			handleShopItem(item){
				console.log(item)
				this.goPage("/pages/componentsC/uniformshop/uniformshopOrderDetail",{item:JSON.stringify(item)})
			},
			sectionChange(index){
				this.current = index;
				if(this.current==0) this.params.status=1;
				if(this.current==1) this.params.status=2;
				if(this.current==2) this.params.status=3;
				this.goSearch()
			},
			scrolltolower(){
				if(this.total == this.list.length){
					return this.setMessage('没有更多了')
				}
				this.params.pageNo ++
				this.getList()
			},
			goSearch(){
				this.params.pageNo = 1
				this.getList()
			
			},
			getList(){
				let selectInfoAccount = uni.getStorageSync('selectInfoAccount');
				this.params.personId = selectInfoAccount.id;
				let params = this.params;
				if(params.pageNo==1) this.list = []
				return orderListApi(params).then(res=>{
					console.log(res);
					this.list = this.list.concat(res.result.records);
				})
				
				
			},
		},
		onLoad() {
			 this.getList();
		},
		onShow() {
			// this.goSearch()
		},
	}
</script>

<style lang="scss" scoped>
	.red{
		color: #fe415c !important;
	}
	.selectBox{
		padding-top: 20rpx;
	}
	.selectItem{
		background-color: #fff;
		margin: 0 30rpx 30rpx;
		border-radius: 8rpx;
		padding: 10rpx;
		box-shadow: 0px 0px 20rpx 0px rgba(102,102,102,0.35);
		padding: 20rpx;
		height: 140rpx;
		display: flex;
		.image{
			width: 100rpx;
			height: 100rpx;
			border-radius: 20rpx;
			image{
				width: 100rpx;
				height: 100rpx;
			}
		}
		.infoBox{
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			flex: 1;
			text{
				color: #c2c2c2;
				// flex: 1;
				display: flex;
				align-items: center;
			}
			.name{
				font-size: 36rpx;
			}
			.moneyText{
				// flex: 1;
				font-size: 38rpx;
			}
		}
		
	}
</style>